let $imgBox = $('.imgBox'),
  $img = $imgBox.children('img'),
  $window = $(window);

//=> JQ 中事件绑定支持多事件绑定：window.onload & window.onscroll 两个事件触发的时候执行相同的事件
$window.on('load scroll', function () {
  if ($img.attr('isLoad') === 'true') {
    // => 之前加载过则不会重新加载
    return;
  }
  let $A = $imgBox.outerHeight() + $imgBox.offset().top,
  $B = $window.outerHeight() + $window.scrollTop();
  if ($A <= $B) {
    // =>加载真实图片
    $img.attr('src', $img.attr('data-img'));
    $img.on('load', function () {
      // =>加载成功: fadeIn 是 JQ 中的渐项动画
      // $img.css('display', 'block');
      $img.stop().fadeIn();
    });
    $img.attr('isLoad', true); // => attr 存储的自定义属性值都是字符串 "true"
  }
});